<script setup>
import { RouterView } from "vue-router";
import { useHomePageStore } from "@/stores/homePage/index.js";
import { ref, onMounted, watch } from "vue";
import { useRouter, useRoute } from "vue-router";

const route = useRoute();
const router = useRouter();
const { getUserDate, exitUser } = useHomePageStore();

const userData = ref([]);
const url = ref("");

const updateUrl = (path) => {
  url.value = path.slice(6);
};

onMounted(async () => {
  const res = await getUserDate();
  userData.value = res;
  updateUrl(route.path);
});

watch(
  () => route.path,
  (newPath) => {
    updateUrl(newPath);
  }
);
</script>

<template>
  <div class="user">
    <div class="user_bg">
      <div class="title">
        <h1>{{userData.name||  userData.username }}</h1>
        <p>{{ userData.introduce || "这个很帅的学士没有留下什么···" }}</p>
      </div>
    </div>

    <div class="user_nav">
      <img :src="userData.img" alt="" />
      <ul>
        <li
          :class="url === 'personalData' ? 'active' : ''"
          @click="router.push('/user/personalData')"
        >
          个人资料
        </li>
        <li
          :class="url === 'myMessage' ? 'active' : ''"
          @click="router.push('/user/myMessage')"
        >
          站内消息
        </li>
        <li
          :class="url === 'myLike' ? 'active' : ''"
          @click="router.push('/user/myLike')"
        >
          我的收藏
        </li>
        <li
          :class="url === 'saveSetting' ? 'active' : ''"
          @click="router.push('/user/saveSetting')"
        >
          安全设置
        </li>
        <li @click="exitUser">退出登录</li>
      </ul>
    </div>
    <div class="user_content">
      <RouterView></RouterView>
    </div>
  </div>
</template>

<style scoped>
@import url("/src/assets/style/homePage/user/user.scss");
</style>
